<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="zui/zui.css">
    <style type="text/css">
        .form-list {
            display: flex;
            gap: 16px;
            justify-content: center;
            padding: 16px;
            align-items: start;
        }

        form {
            border-radius: 8px;
            box-shadow: 0px 0px 4px 4px #dee2e6;
            padding: 16px;
            display: flex;
            flex-direction: column;
            width: 300px;
            gap: 12px;
        }
    </style>
</head>

<body>
    <div class="form-list">
        <form enctype="application/x-www-form-urlencoded" action="#" name="form1">
            <div class="form-group">
                <label class="form-label" for="username">用户名</label>
                <input type="text" class="form-control" id="username" name="username">
            </div>
            <div class="form-group">
                <label class="form-label" for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password">
            </div>
            <div class="form-group">
                <label class="form-label">性别</label>
                <div class="radio-primary">
                    <input type="radio" name="sex" id="male" checked value="male">
                    <label class="form-check-label" for="male">男</label>
                </div>
                <div class="radio-primary">
                    <input type="radio" name="sex" id="female" value="female">
                    <label class="form-check-label" for="female">女</label>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn primary btn-wide">注册</button>
            </div>
        </form>
        <form enctype="application/x-www-form-urlencoded" action="#" name="form2">
            <div class="form-group">
                <label class="form-label" for="account">账号</label>
                <input type="text" class="form-control" id="account" name="account">
            </div>
            <div class="form-group">
                <label class="form-label" for="passwd">密码</label>
                <input type="password" class="form-control" id="passwd" name="passwd">
            </div>
            <div class="form-actions">
                <button type="button" class="btn primary btn-wide">登录</button>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        // ********* form1 **********
        const form = document.forms.form1;
        const sex = form.querySelectorAll("input[name='sex']");
        Array.from(sex).forEach((radio) => {
            radio.addEventListener('change', function (e) {
                console.log(this.value);
            });
        })
        form.onsubmit = function (e) {
            let username = form.username.value || "";
            let password = form.password.value || "";
            if (username === "") {
                alert('用户名为空');
                return false;
            }
            if (password === "") {
                alert('密码为空');
                return false;
            }
            return true;
        }

        // ********* form2 **********

    </script>
</body>

</html>